<template>
  <div class='container'>
    <el-card>
      <div>
        <el-h3>6组_王霈伦</el-h3>
      </div>
      <br>
      <div slot="header" v-if="!!subID" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
        <el-form-item label="目录名称"  prop="user">
          <el-input v-model="formInline.user" :disabled="isLoading"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="formInline.state" placeholder="请选择" :disabled="isLoading">
            <el-option label="已启用" value="1">
            </el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button plain size="small" @click="onClear" :disabled="isLoading">清除</el-button>
          <el-button type="primary" size="small" @click="onSubmit" :disabled="isLoading">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 提交按钮 -->
      <div class="btn">
        <el-button type="text" icon="el-icon-back" @click="$router.push('/subjects/list')" v-if= "!!subID">返回学科</el-button>
        <el-button type="success" @click="ChangeDirectory()" size="small" :disabled="isLoading"><i class="el-icon-edit"></i> 新增目录</el-button>
      </div>
      <!-- 数据条数提示信息 -->
      <el-alert
        :title="titleCounts"
        type="info"
        show-icon
        class="info"
        :closable="false"
        >
      </el-alert>
      <!-- 表格列表 -->
      <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="isLoading">
        <el-table-column
          prop="id"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科">
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180">
          <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===0">已禁用</span>
            <span v-else-if="scope.row.state===1" >已启用</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作">
          <template slot-scope="scope">
            <span>
              <el-button
              type="text" @click="changeBtnState(scope.row.id,scope.row.state)" v-text = "scope.row.state===1? '禁用':'启用'">
              </el-button>
              <el-button
              type="text" :disabled = 'scope.row.state===1' @click="ChangeDirectory(scope.row.id)">修改
              </el-button>
              <el-button
              type="text" :disabled = 'scope.row.state===1' @click="delDirectory(scope.row.id)">删除
              </el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <div class="footer">
        <el-pagination
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSize"
          :total="total"
          background
          layout="prev, pager, next, sizes, jumper"
          :disabled="isLoading">
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增/修改目录弹出框 -->
    <el-dialog :title="cTitle" class="formDialog" :visible.sync="dialogFormVisible" width="30%" @close="dialogClose">
      <el-form :model="infoForm" :rules="rules" ref="form">
        <el-form-item label="所属学科" :label-width="formLabelWidth" prop="region" v-if="!subID">
          <el-select v-model="infoForm.region" class="formDialogSelect" placeholder="请选择所属学科">
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="infoForm.name" class="formDialogInput" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="dialogFooter">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDirectory">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改目录弹出框 -->
    <!-- <el-dialog title="修改目录" class="formDialog" :visible.sync="dialogFormVisible" width="30%" @close="addDialogClose">
      <el-form :model="infoForm" :rules="rules" ref="form">
        <el-form-item label="所属学科" :label-width="formLabelWidth" prop="region" v-if="!subID">
          <el-select v-model="infoForm.region" class="formDialogSelect" placeholder="请选择所属学科">
            <el-option
              v-for="item in channelList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="infoForm.name" class="formDialogInput" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="dialogFooter">
            <el-button @click="dialogChangVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitChange">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import { list, detail, update, add, remove, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 搜索表单数据
      formInline: {
        user: null, // 目录名称
        state: null // 目录状态
      },
      // 新增,修改表单数据
      infoForm: {
        name: null, // 目录名称
        region: null // 目录状态
      },
      total: 0, // 获取数据总数
      pageSize: [10, 20, 30, 40, 50], // 每页显示条数下拉框
      sizeChange: 10, // 每页显示条数 (默认10条)
      titleCounts: '', // 存放提示信息 -- 数据一共XX条
      currentPage: 1, // 当前页数 (默认第一页)
      subID: null, // 存放所属学科id
      dialogFormVisible: false, // 新增目录弹出框控制元素
      tableData: [], // 存放表格数据
      channelList: [], // 存放所属学科下拉框数据
      changeId: null, // 存放修改目录id
      formLabelWidth: '120px', // 新增,修改弹出框里input框样式宽度
      cTitle: '新增目录', // 弹窗标题
      isLoading: false, // 点击禁用
      // 表单验证
      rules: {
        // 目录名称input框验证规则
        name: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        // 所属学科验证规则
        region: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    // 判断跳转页面id和name存在
    if (this.$route.query.id && this.$route.query.name) {
      this.subID = this.$route.query.id
    }
    // 执行目录列表接口
    this.loadDirectory()
    // 执行学科列表接口
    this.loadDiscipline()
  },
  methods: {
    // 点击目录修改/新增按钮,打开弹窗
    ChangeDirectory (objeditId) {
      this.dialogFormVisible = true
      if (objeditId) {
        this.cTitle = '修改目录'
        this.changeID = objeditId
        detail({ id: objeditId })
          .then(data => {
            this.infoForm.name = data.data.directoryName
            this.infoForm.region = data.data.subjectID
          })
      }
    },
    // 点击弹窗确认按钮
    confirmDirectory () {
      if (this.changeID) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false
            this.uploadChangeDirectory()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } else {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.dialogFormVisible = false
            this.uploadAddDirectory()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    // 提交修改目录表单
    uploadChangeDirectory () {
      update({ id: this.changeID, subjectID: Number(this.subID ? this.subID : this.infoForm.region), directoryName: this.infoForm.name })
        .then(data => {
          this.$message({
            message: '恭喜你，修改目录成功',
            type: 'success'
          })
          this.changeID = null
          this.cTitle = '新增目录'
          this.loadDirectory()
        })
        .catch(e => {
          this.$message.e('错了哦，修改目录失败')
        })
    },
    // 提交新增目录表单
    uploadAddDirectory () {
      add({ subjectID: Number(this.subID ? this.subID : this.infoForm.region), directoryName: this.infoForm.name })
        .then(data => {
          this.$message({
            message: '恭喜你，新增目录成功',
            type: 'success'
          })
          this.loadDirectory()
        })
        .catch(e => {
          this.$message.e('错了哦，新增目录失败')
        })
    },
    // 关闭新增目录弹窗,清除数据
    dialogClose () {
      this.$refs.form.resetFields()
      this.changeID = null
      this.cTitle = '新增目录'
    },
    // 清除表单数据
    onClear () {
      this.$refs.formInline.resetFields()
    },
    // 点击搜索功能
    onSubmit () {
      this.currentPage = 1
      this.isLoading = true
      this.loadDirectory()
    },
    // 当页码改变时触发
    handleCurrentChange (val) {
      this.currentPage = val
      this.isLoading = true
      this.loadDirectory()
    },
    // 当每页条数改变时触发
    handleSizeChange (val) {
      this.sizeChange = val
      this.isLoading = true
      this.loadDirectory()
    },
    // 点击删除按钮删除目录
    delDirectory (rowid) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id: rowid })
          .then(data => {
            this.loadDirectory()
          })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改目录状态
    changeBtnState (rowid, rowstate) {
      changeState({ id: rowid, state: rowstate === 1 ? 0 : 1 })
        .then(data => {
          this.loadDirectory()
        })
    },
    // 获取列表数据
    loadDirectory () {
      // 声明获取列表参数
      const queryObj = {
        page: this.currentPage,
        pagesize: this.sizeChange,
        subjectID: this.subID,
        directoryName: this.formInline.name,
        state: this.formInline.state
      }
      list(queryObj)
        .then(data => {
          this.tableData = data.data.items
          this.currentPage = Number(data.data.page)
          this.total = data.data.counts
          this.titleCounts = `数据一共 ${this.total} 条`
          this.isLoading = false
        })
    },
    // 获取所属学科列表
    loadDiscipline () {
      simple()
        .then(data => {
          this.channelList = data.data
        })
    }
  }
}
</script>

<style scoped rel="stylesheet/scss" lang='scss'>
  .container {
    padding: 20px;
  }
  .text {
    font-size: 14px;
  }
  .demo-form-inline{
    float: left;
  }
  .btn{
    float: right;
  }
  .info{
    margin-bottom: 20px;
  }
  .footer{
    height: 50px;
    margin-top: 20px;
    position: relative
  }
  .page{
     position: absolute;
     right: 0;
  }
  .formDialogInput,
  .formDialogSelect{
    width: 250px;
    margin-bottom: 10px;
  }
  .dialogFooter{
    margin-left: 25%;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  </style>
